<template>
    <div class="console-wrapper">
        <div class="console-top">
            <el-tag type="success" color="black" size="medium" effect="light">设备工作状况</el-tag>
        </div>
        <div class="console-center">
            <div class="smart-devices">
                <div>
                    <el-button type="primary" icon="el-icon-setting" size="mini" @click="$store.state.views = 1">智能设备</el-button>
                </div>
                <div class="item-smart">
                    <div>
                        <el-button type="text" icon="el-icon-cpu" @click="$store.state.views = 1">传感器</el-button>
                    </div>
                    <div>
                        <el-button type="text" icon="el-icon-camera" @click="$store.state.views = 1">摄像头</el-button>
                    </div>
                </div>
            </div>
            <div class="control-equipment">
                <div>
                    <el-button type="primary" icon="el-icon-discover" size="mini" @click="$store.state.views=3">控制设备</el-button>
                </div>
                <div class="item-control">
                    <div>
                        <el-button type="text" icon="el-icon-receiving" @click="$store.state.views=3">卷帘机</el-button>
                    </div>
                    <div>
                        <el-button type="text" icon="el-icon-box" @click="$store.state.views=3">增氧机</el-button>
                    </div>
                    <div>
                        <el-button type="text" icon="el-icon-turn-off" @click="$store.state.views=3">换水伐</el-button>
                    </div>
                    <div>
                        <el-button type="text" icon="el-icon-bangzhu" @click="$store.state.views=3">水泵</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "console"
    }
</script>

<style scoped lang="scss">
    .console-wrapper{
        .console-center{
            height: 2.8rem;
            margin-top: 0.125rem;
            .smart-devices{
                height: 50%;
                .item-smart{
                    height: 1.5rem;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }
            .control-equipment{
                height: 50%;
                .item-control{
                    height: 1.5rem;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }
        }
    }
</style>
